<template>
	<view class="content">
		<u-button type="primary" style="margin-top: 100rpx;" @click="upload">上传图片</u-button>
		<image-croppers :src="tempFilePath" @confirm="confirmCover" @cancel="cancel"></image-croppers>
		<image :src="img" style="width: 100%;min-height: 100%;" mode="widthFix"></image>
	</view>
</template>

<script>
	import ImageCroppers from "./invinbg-image-croppers.vue";
export default {
	components:{
		ImageCroppers
	},
	data() {
		return {
			tempFilePath: undefined,
			img: undefined
		}
	},
	methods:{
		upload() {
			let self = this
			uni.chooseImage({
				count: 4, //默认5
				compressed: false,
				sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有, 'compressed'
				sourceType: ['album'], //从相册选择
				success: (res) => {
					self.tempFilePath = res.tempFiles[0].path
				}
			});
		},
		confirmCover(e){
			// console.log(e.detail.tempFilePath)
			this.img = e.detail.tempFilePath
		},
		cancel(){
			
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
}
</style>
